<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content"
						style="text-align: center; height: 24rem;">
						<div class="alert alert-info">微信号以及短信模板选择</div>
						<form class="form-horizontal m" id="form-user-add">
							<div class="form-group">
								<label class="col-sm-3 control-label ">选择微信号：</label>
								<div class="col-sm-6">
									<select class="form-control wx_code"  th:with="wxCodes=${codes}">
										<option value="">选择微信号</option>
										<option th:each="code : ${wxCodes}" th:text="${code.wxName}" th:value="${code.wxCode}"></option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">选择产品类型：</label>
								<div class="col-sm-6">
									<select class="form-control type" >
										<option th:value="1">单产品链接</option>
										<option th:value="2">多产品链接</option>
									</select>
								</div>
							</div>
							<div class="form-group msg_model" style="display: none">
								<label class="col-sm-3 control-label ">选择短信模板：</label>
								<div class="col-sm-6">
									<select class="form-control wx_model"  th:with="templates=${templates}">
										<option value="">选择模板</option>
										<option th:each="template : ${templates}" th:text="${template.modelName}" th:value="${template.id}"></option>
									</select>
								</div>
							</div>

						</form>
						<!--<div style="text-align: center;">
							<button type="button" class="btn btn-primary" onclick="saveChoose()">&nbsp;&nbsp;确 定 选 择 &nbsp;&nbsp;</button>
						</div>-->
					</div>
				</div>
			</div>
			<div class="col-sm-7 dxqf" >
				<div class="ibox float-e-margins">
					<div class="ibox-content" style="height: 45rem;">
						<div class="alert alert-info" align="center">短 信 群 发</div>

						<form class="form-horizontal m product_one" id="form-product-one">
							<div class="form-group">
								<label class="col-sm-3 control-label ">链接文字：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="productName" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">链接url：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="productUrl" />
								</div>
							</div>
						</form>

						<form class="form-horizontal m product_two" id="form-product-two" style="display: none">
							<div class="form-group">
								<label class="col-sm-3 control-label ">顶部文字：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="topName" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">产品一名称：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="productOneName" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">产品一链接：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="productOneLink"
										placeholder="例如：https://yjbyh5.51longyyu.com">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">产品一链接文字：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="productOneLinkText" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">产品二名称：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="productTwoName" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">产品二链接：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="productTwoLink"
										placeholder="例如：https://yjbyh5.51longyyu.com">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">产品二链接文字：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="productTwoLinkText" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">底部文字：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="endName"
										value="多一次申请就多一次机会">
								</div>
							</div>
						</form>
						<div style="text-align: center;">
							<button type="button" class="btn btn-primary" onclick="preview()">&nbsp;&nbsp;
								预&nbsp;&nbsp;览 &nbsp;&nbsp;</button>
						</div>
					</div>
				</div>
			</div>

			<div class="col-sm-5 ylck" style="display: none;">
				<div class="ibox float-e-margins">
					<div class="ibox-content "
						style="text-align: center; height: 37rem;">
						<div class="alert alert-info" align="center">预 览 窗 口</div>
						<div class="ibox-content previewModel" style="margin-top: 6rem;"></div>
						<div>
							<button class="btn btn-primary btn-warning"
								onclick="groupSending()">&nbsp;&nbsp; 一 键 群 发
								&nbsp;&nbsp;</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:include="include :: footer"></div>

	<script th:inline="javascript">
        var ctx = [[@{/}]];
        var type = 1;// 默认产品类型为 1 （单产品链接）
        var jsonStr = "";var wxCode = "";var flag = 1; // 未选择微信号标志

        $('.wx_code').bind("change", function () {
            // 设置 wxCode 的值
            wxCode = $(".wx_code option:selected").val();
        });

    	/* 选择 */
    	function saveChoose(){
    		wxCode = $('.wx_code').val();
    		if(wxCode == "") {
    			$('.ylck').hide();
    			$.modal.alertWarning("请选择微信号！");
    		}else {
                flag = 0;
            }
    	}


		// 选择产品类型
        $('.type').bind("change", function () {
            type = $(".type option:selected").val();
            saveChoose();
            if (type == 1) {
                $('.product_one').show();
                $('.product_two').hide();
                $('.msg_model').hide();
            } else {
                $('.product_two').show();
                $('.product_one').hide();
                $('.msg_model').show();
            }
        });


        $('.wx_model').bind("change", function () {
            saveChoose();

			if(flag == 0){
				var model_id = $(".wx_model option:selected").val();
				/* 根据id 获取模板信息 渲染页面的select */
				if(model_id != ""){
					$.ajax({
						cache : true,
						type : "POST",
						url : ctx + "system/wxTemplates/getwxTemplateById",
						data : {
							"modelId": model_id
						},
						async : false,
						error : function(request) {
							$.modal.alertError("系统错误");
						},
						success : function(data) {
							if(data != ""){
								var jsonData = eval("(" + data + ")");
								$("input[name='topName']").val(jsonData.topName);
								$("input[name='productOneName']").val(jsonData.productOneName);
								$("input[name='productOneLink']").val(jsonData.productOneLink);
                                $("input[name='productOneLinkText']").val(jsonData.productOneLinkText);
								$("input[name='productTwoName']").val(jsonData.productTwoName);
								$("input[name='productTwoLink']").val(jsonData.productTwoLink);
                                $("input[name='productTwoLinkText']").val(jsonData.productTwoLinkText);
								$("input[name='endName']").val(jsonData.endName);
								// $.operate.successCal	lback(data);
							}
						}
					});
				}else{
					$('.dxqf').hide();
					$('.ylck').hide();
				}
            }
        });

    	
    	/* 预览 */
    	function preview(){
            saveChoose();
    	    if(type == 2){
                var topName = $("input[name='topName']").val();
                var productOneName = $("input[name='productOneName']").val();
                var productOneLink = $("input[name='productOneLink']").val();
                var productOneLinkText = $("input[name='productOneLinkText']").val();
                var productTwoName = $("input[name='productTwoName']").val();
                var productTwoLink = $("input[name='productTwoLink']").val();
                var productTwoLinkText = $("input[name='productTwoLinkText']").val();
                var endName = $("input[name='endName']").val();

                if(productOneName == "" || productOneLink == ""){
                    $.modal.alertWarning("产品一和链接不能为空");
                    return false;
                }

                var html = '<p>'+topName+'</p>';
                html += '<p>【'+productOneName+'】&nbsp;&nbsp;<a href="'+productOneLink+'" >'+productOneLinkText+'</a></p>';
                if(productTwoName != "" && productTwoLink != ""){
                    html += '<p>【'+productTwoName+'】&nbsp;&nbsp;<a href="'+productTwoLink+'" >'+productTwoLinkText+'</a></p>';
                }
                html += '<p></p><p>'+endName+'</p>';
                $('.previewModel').html(html);


                jsonStr = '{"topName":"'+topName+'",';
                jsonStr += '"productOneName":"'+productOneName+'",';
                jsonStr += '"productOneLink":"'+productOneLink+'",';
                jsonStr += '"productOneLinkText":"'+productOneLinkText+'",';
                jsonStr += '"productTwoName":"'+productTwoName+'",';
                jsonStr += '"productTwoLink":"'+productTwoLink+'",';
                jsonStr += '"productTwoLinkText":"'+productTwoLinkText+'",';
                jsonStr += '"endName":"'+endName+'"}';
			}else{
                var productName = $("input[name='productName']").val();
                var productUrl = $("input[name='productUrl']").val();
                if(productName == "" || productUrl == ""){
                    $.modal.alertWarning("链接文字和链接url不能为空");
                    return false;
                }
                var html = '<p><a href="'+productUrl+'" >'+productName+'</a></p>'
                $('.previewModel').html(html);

                jsonStr = '{"productName":"'+productName+'",';
                jsonStr += '"productUrl":"'+productUrl+'"}';
			}
            $('.ylck').show();
        }

    	/* 群发 */
    	function groupSending(){
            $.modal.loading("&nbsp;>.<&nbsp; 群发中，请稍后...");
    		$.ajax({
	    		cache : true,
	    		type : "POST",
	    		url : ctx + "system/wxTemplates/groupSending",
	    		data : {
	    			"wxCode":wxCode,
	    			"jsonStr":jsonStr,
					"type":type
	    		},
	    		async : false,
	    		error : function(request) {
	    			$.modal.alertWarning("！");
	    		},
	    		success : function(data) {
	    			if(data.code == 1){
                        $.modal.alertWarning("群发失败！");
	    			}else{
                        $.modal.alertSuccess("群发成功！");
					}
                    $.modal.closeLoading();
	    		}
	    	});
    	}

    </script>


</body>
</html>
